<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Icon - FLATY Admin</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!--base css styles-->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">

        <!--page specific css styles-->

        <!--flaty css styles-->
        <link rel="stylesheet" href="css/flaty.css">
        <link rel="stylesheet" href="css/flaty-responsive.css">

        <link rel="shortcut icon" href="img/favicon.png">
    </head>
    <body>

        <!-- BEGIN Theme Setting -->
        <div id="theme-setting">
            <a href="#"><i class="fa fa-gears fa fa-2x"></i></a>
            <ul>
                <li>
                    <span>Skin</span>
                    <ul class="colors" data-target="body" data-prefix="skin-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span>Navbar</span>
                    <ul class="colors" data-target="#navbar" data-prefix="navbar-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span>Sidebar</span>
                    <ul class="colors" data-target="#main-container" data-prefix="sidebar-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span></span>
                    <a data-target="navbar" href="#"><i class="fa fa-square-o"></i> Fixed Navbar</a>
                    <a class="hidden-inline-xs" data-target="sidebar" href="#"><i class="fa fa-square-o"></i> Fixed Sidebar</a>
                </li>
            </ul>
        </div>
        <!-- END Theme Setting -->

        <!-- BEGIN Navbar -->
        <div id="navbar" class="navbar">
            <button type="button" class="navbar-toggle navbar-btn collapsed" data-toggle="collapse" data-target="#sidebar">
                <span class="fa fa-bars"></span>
            </button>
            <a class="navbar-brand" href="#">
                <small>
                    <i class="fa fa-desktop"></i>
                    FLATY Admin
                </small>
            </a>

            <!-- BEGIN Navbar Buttons -->
            <ul class="nav flaty-nav pull-right">
                <!-- BEGIN Button Tasks -->
                <li class="hidden-xs">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="fa fa-tasks"></i>
                        <span class="badge badge-warning">4</span>
                    </a>

                    <!-- BEGIN Tasks Dropdown -->
                    <ul class="dropdown-navbar dropdown-menu">
                        <li class="nav-header">
                            <i class="fa fa-check"></i>
                            4 Tasks to complete
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Software Update</span>
                                    <span class="pull-right">75%</span>
                                </div>

                                <div class="progress progress-mini">
                                    <div style="width:75%" class="progress-bar progress-bar-warning"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Transfer To New Server</span>
                                    <span class="pull-right">45%</span>
                                </div>

                                <div class="progress progress-mini">
                                    <div style="width:45%" class="progress-bar progress-bar-danger"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Bug Fixes</span>
                                    <span class="pull-right">20%</span>
                                </div>

                                <div class="progress progress-mini">
                                    <div style="width:20%" class="progress-bar"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Writing Documentation</span>
                                    <span class="pull-right">85%</span>
                                </div>

                                <div class="progress progress-mini progress-striped active">
                                    <div style="width:85%" class="progress-bar progress-bar-success"></div>
                                </div>
                            </a>
                        </li>

                        <li class="more">
                            <a href="#">See tasks with details</a>
                        </li>
                    </ul>
                    <!-- END Tasks Dropdown -->
                </li>
                <!-- END Button Tasks -->

                <!-- BEGIN Button Notifications -->
                <li class="hidden-xs">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="fa fa-bell"></i>
                        <span class="badge badge-important">5</span>
                    </a>

                    <!-- BEGIN Notifications Dropdown -->
                    <ul class="dropdown-navbar dropdown-menu">
                        <li class="nav-header">
                            <i class="fa fa-warning"></i>
                            5 Notifications
                        </li>

                        <li class="notify">
                            <a href="#">
                                <i class="fa fa-comment orange"></i>
                                <p>New Comments</p>
                                <span class="badge badge-warning">4</span>
                            </a>
                        </li>

                        <li class="notify">
                            <a href="#">
                                <i class="fa fa-twitter blue"></i>
                                <p>New Twitter followers</p>
                                <span class="badge badge-info">7</span>
                            </a>
                        </li>

                        <li class="notify">
                            <a href="#">
                                <img src="img/demo/avatar/avatar2.jpg" alt="Alex" />
                                <p>David would like to become moderator.</p>
                            </a>
                        </li>

                        <li class="notify">
                            <a href="#">
                                <i class="fa fa-bug pink"></i>
                                <p>New bug in program!</p>
                            </a>
                        </li>

                        <li class="notify">
                            <a href="#">
                                <i class="fa fa-shopping-cart green"></i>
                                <p>You have some new orders</p>
                                <span class="badge badge-success">+10</span>
                            </a>
                        </li>

                        <li class="more">
                            <a href="#">See all notifications</a>
                        </li>
                    </ul>
                    <!-- END Notifications Dropdown -->
                </li>
                <!-- END Button Notifications -->

                <!-- BEGIN Button Messages -->
                <li class="hidden-xs">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="fa fa-envelope"></i>
                        <span class="badge badge-success">3</span>
                    </a>

                    <!-- BEGIN Messages Dropdown -->
                    <ul class="dropdown-navbar dropdown-menu">
                        <li class="nav-header">
                            <i class="fa fa-comments"></i>
                            3 Messages
                        </li>

                        <li class="msg">
                            <a href="#">
                                <img src="img/demo/avatar/avatar3.jpg" alt="Sarah's Avatar" />
                                <div>
                                    <span class="msg-title">Sarah</span>
                                    <span class="msg-time">
                                        <i class="fa fa-clock-o"></i>
                                        <span>a moment ago</span>
                                    </span>
                                </div>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </a>
                        </li>

                        <li class="msg">
                            <a href="#">
                                <img src="img/demo/avatar/avatar4.jpg" alt="Emma's Avatar" />
                                <div>
                                    <span class="msg-title">Emma</span>
                                    <span class="msg-time">
                                        <i class="fa fa-clock-o"></i>
                                        <span>2 Days ago</span>
                                    </span>
                                </div>
                                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...</p>
                            </a>
                        </li>

                        <li class="msg">
                            <a href="#">
                                <img src="img/demo/avatar/avatar5.jpg" alt="John's Avatar" />
                                <div>
                                    <span class="msg-title">John</span>
                                    <span class="msg-time">
                                        <i class="fa fa-clock-o"></i>
                                        <span>8:24 PM</span>
                                    </span>
                                </div>
                                <p>Duis aute irure dolor in reprehenderit in ...</p>
                            </a>
                        </li>

                        <li class="more">
                            <a href="#">See all messages</a>
                        </li>
                    </ul>
                    <!-- END Notifications Dropdown -->
                </li>
                <!-- END Button Messages -->

                <!-- BEGIN Button User -->
                <li class="user-profile">
                    <a data-toggle="dropdown" href="#" class="user-menu dropdown-toggle">
                        <img class="nav-user-photo" src="img/demo/avatar/avatar1.jpg" alt="Penny's Photo" />
                        <span id="user_info">
                            Penny
                        </span>
                        <i class="fa fa-caret-down"></i>
                    </a>

                    <!-- BEGIN User Dropdown -->
                    <ul class="dropdown-menu dropdown-navbar" id="user_menu">
                        <li class="nav-header">
                            <i class="fa fa-clock-o"></i>
                            Logined From 20:45
                        </li>

                        <li>
                            <a href="#">
                                <i class="fa fa-cog"></i>
                                Account Settings
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="fa fa-user"></i>
                                Edit Profile
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="fa fa-question"></i>
                                Help
                            </a>
                        </li>

                        <li class="divider visible-xs"></li>

                        <li class="visible-xs">
                            <a href="#">
                                <i class="fa fa-tasks"></i>
                                Tasks
                                <span class="badge badge-warning">4</span>
                            </a>
                        </li>
                        <li class="visible-xs">
                            <a href="#">
                                <i class="fa fa-bell"></i>
                                Notifications
                                <span class="badge badge-important">8</span>
                            </a>
                        </li>
                        <li class="visible-xs">
                            <a href="#">
                                <i class="fa fa-envelope"></i>
                                Messages
                                <span class="badge badge-success">5</span>
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="#">
                                <i class="fa fa-off"></i>
                                Logout
                            </a>
                        </li>
                    </ul>
                    <!-- BEGIN User Dropdown -->
                </li>
                <!-- END Button User -->
            </ul>
            <!-- END Navbar Buttons -->
        </div>
        <!-- END Navbar -->

        <!-- BEGIN Container -->
        <div class="container" id="main-container">
            <!-- BEGIN Sidebar -->
            <div id="sidebar" class="navbar-collapse collapse">
                <!-- BEGIN Navlist -->
                <ul class="nav nav-list">
                    <!-- BEGIN Search Form -->
                    <li>
                        <form target="#" method="GET" class="search-form">
                            <span class="search-pan">
                                <button type="submit">
                                    <i class="fa fa-search"></i>
                                </button>
                                <input type="text" name="search" placeholder="Search ..." autocomplete="off" />
                            </span>
                        </form>
                    </li>
                    <!-- END Search Form -->
                    <li>
                        <a href="index.html">
                            <i class="fa fa-dashboard"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

                    <li>
                        <a href="typography.html">
                            <i class="fa fa-text-width"></i>
                            <span>Typography</span>
                        </a>
                    </li>

                    <li class="active">
                        <a href="#" class="dropdown-toggle">
                            <i class="fa fa-desktop"></i>
                            <span>UI Elements</span>
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="ui_general.html">General</a></li>
                            <li><a href="ui_button.html">Button</a></li>
                            <li><a href="ui_tabs.html">Tab & Accordion</a></li>
                            <li><a href="ui_slider.html">Slider</a></li>
                            <li><a href="ui_tile.html">Tile</a></li>
                            <li><a href="ui_timeline.html">Timeline</a></li>
                            <li><a href="ui_chart.html">Chart</a></li>
                            <li><a href="ui_message.html">Conversation</a></li>
                            <li><a href="ui_horizontal-menu.html">Horizontal Menu</a></li>
                            <li class="active"><a href="ui_icon.html">Icon</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="fa fa-edit"></i>
                            <span>Forms</span>
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="form_layout.html">Layout</a></li>
                            <li><a href="form_component.html">Component</a></li>
                            <li><a href="form_wizard.html">Wizard</a></li>
                            <li><a href="form_validation.html">Validation</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="fa fa-list"></i>
                            <span>Tables</span>
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="table_basic.html">Basic</a></li>
                            <li><a href="table_advance.html">Advance</a></li>
                            <li><a href="table_dynamic.html">Dynamic</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="fa fa-globe"></i>
                            <span>Maps</span>
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="map_google.html">Google Maps</a></li>
                            <li><a href="map_vector.html">Vector Maps</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="box.html">
                            <i class="fa fa-list-alt"></i>
                            <span>Box</span>
                        </a>
                    </li>

                    <li>
                        <a href="calendar.html">
                            <i class="fa fa-calendar"></i>
                            <span>Calendar</span>
                        </a>
                    </li>

                    <li>
                        <a href="gallery.html">
                            <i class="fa fa-picture-o"></i>
                            <span>Gallery</span>
                        </a>
                    </li>

                    <li>
                        <a href="grid.html">
                            <i class="fa fa-th"></i>
                            <span>Griding System</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="fa fa-file-text-o"></i>
                            <span>Sample Pages</span>
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="extra_login.html">Login &amp; Register</a></li>
                            <li><span>Email</span>
                                <ul>
                                    <li><a href="extra_mail-list.html">Inbox</a></li>
                                    <li><a href="extra_mail-msg.html">Mail Thread</a></li>
                                    <li><a href="extra_mail-compose.html">Compose</a></li>
                                </ul>
                            </li>
                            <li><a href="extra_profile.html">User Profile</a></li>
                            <li><a href="extra_invoice.html">Invoice</a></li>
                            <li><a href="extra_search.html">Search Results</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="fa fa-file"></i>
                            <span>Other Pages</span>
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="more_blank.html">Blank Page</a></li>
                            <li><a href="more_full-width.html">Full Width Page</a></li>
                            <li><span>Errors</span>
                                <ul>
                                    <li><a href="more_error-404.html">Error 404</a></li>
                                    <li><a href="more_error-500.html">Error 500</a></li>
                                </ul>
                            </li>
                            <li><a href="more_set-skin.html">Skin</a></li>
                            <li><a href="more_set-sidebar-navbar-color.html">Sidebar &amp; Navbar</a></li>
                            <li><a href="more_sidebar-collapsed.html">Collapsed Sidebar</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>
                </ul>
                <!-- END Navlist -->

                <!-- BEGIN Sidebar Collapse Button -->
                <div id="sidebar-collapse" class="visible-lg">
                    <i class="fa fa-angle-double-left"></i>
                </div>
                <!-- END Sidebar Collapse Button -->
            </div>
            <!-- END Sidebar -->

            <!-- BEGIN Content -->
            <div id="main-content">
                <!-- BEGIN Page Title -->
                <div class="page-title">
                    <div>
                        <h1><i class="fa fa-file-o"></i> Icon</h1>
                        <h4>FontAwesome Icons</h4>
                    </div>
                </div>
                <!-- END Page Title -->

                <!-- BEGIN Breadcrumb -->
                <div id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="index.html">Home</a>
                            <span class="divider"><i class="fa fa-angle-right"></i></span>
                        </li>
                        <li class="active">Icon</li>
                    </ul>
                </div>
                <!-- END Breadcrumb -->

                <!-- BEGIN Main Content -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="box box-pink">
                            <div class="box-title">
                                <h3><i class="fa fa-puzzle-piece"></i> Glyphicons</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="fa fa-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
    <ul class="demo-glyphicons">
      <li><span class="glyphicon glyphicon-adjust"></span> .glyphicon .glyphicon-adjust</li>
      <li><span class="glyphicon glyphicon-align-center"></span> .glyphicon .glyphicon-align-center</li>
      <li><span class="glyphicon glyphicon-align-justify"></span> .glyphicon .glyphicon-align-justify</li>
      <li><span class="glyphicon glyphicon-align-left"></span> .glyphicon .glyphicon-align-left</li>
      <li><span class="glyphicon glyphicon-align-right"></span> .glyphicon .glyphicon-align-right</li>
      <li><span class="glyphicon glyphicon-arrow-down"></span> .glyphicon .glyphicon-arrow-down</li>
      <li><span class="glyphicon glyphicon-arrow-left"></span> .glyphicon .glyphicon-arrow-left</li>
      <li><span class="glyphicon glyphicon-arrow-right"></span> .glyphicon .glyphicon-arrow-right</li>
      <li><span class="glyphicon glyphicon-arrow-up"></span> .glyphicon .glyphicon-arrow-up</li>
      <li><span class="glyphicon glyphicon-asterisk"></span> .glyphicon .glyphicon-asterisk</li>
      <li><span class="glyphicon glyphicon-backward"></span> .glyphicon .glyphicon-backward</li>
      <li><span class="glyphicon glyphicon-ban-circle"></span> .glyphicon .glyphicon-ban-circle</li>
      <li><span class="glyphicon glyphicon-barcode"></span> .glyphicon .glyphicon-barcode</li>
      <!-- <li><span class="glyphicon glyphicon-bell"></span> .glyphicon .glyphicon-bell</li> -->
      <li><span class="glyphicon glyphicon-bold"></span> .glyphicon .glyphicon-bold</li>
      <li><span class="glyphicon glyphicon-book"></span> .glyphicon .glyphicon-book</li>
      <!-- <li><span class="glyphicon glyphicon-bookmark"></span> .glyphicon .glyphicon-bookmark</li>
      <li><span class="glyphicon glyphicon-briefcase"></span> .glyphicon .glyphicon-briefcase</li> -->
      <li><span class="glyphicon glyphicon-bullhorn"></span> .glyphicon .glyphicon-bullhorn</li>
      <!-- <li><span class="glyphicon glyphicon-calendar"></span> .glyphicon .glyphicon-calendar</li>
      <li><span class="glyphicon glyphicon-camera"></span> .glyphicon .glyphicon-camera</li> -->
      <li><span class="glyphicon glyphicon-certificate"></span> .glyphicon .glyphicon-certificate</li>
      <li><span class="glyphicon glyphicon-check"></span> .glyphicon .glyphicon-check</li>
      <li><span class="glyphicon glyphicon-chevron-down"></span> .glyphicon .glyphicon-chevron-down</li>
      <li><span class="glyphicon glyphicon-chevron-left"></span> .glyphicon .glyphicon-chevron-left</li>
      <li><span class="glyphicon glyphicon-chevron-right"></span> .glyphicon .glyphicon-chevron-right</li>
      <li><span class="glyphicon glyphicon-chevron-up"></span> .glyphicon .glyphicon-chevron-up</li>
      <li><span class="glyphicon glyphicon-circle-arrow-down"></span> .glyphicon .glyphicon-circle-arrow-down</li>
      <li><span class="glyphicon glyphicon-circle-arrow-left"></span> .glyphicon .glyphicon-circle-arrow-left</li>
      <li><span class="glyphicon glyphicon-circle-arrow-right"></span> .glyphicon .glyphicon-circle-arrow-right</li>
      <li><span class="glyphicon glyphicon-circle-arrow-up"></span> .glyphicon .glyphicon-circle-arrow-up</li>
      <li><span class="glyphicon glyphicon-cloud"></span> .glyphicon .glyphicon-cloud</li>
      <li><span class="glyphicon glyphicon-cloud-download"></span> .glyphicon .glyphicon-cloud-download</li>
      <li><span class="glyphicon glyphicon-cloud-upload"></span> .glyphicon .glyphicon-cloud-upload</li>
      <li><span class="glyphicon glyphicon-cog"></span> .glyphicon .glyphicon-cog</li>
      <li><span class="glyphicon glyphicon-collapse-down"></span> .glyphicon .glyphicon-collapse-down</li>
      <li><span class="glyphicon glyphicon-collapse-up"></span> .glyphicon .glyphicon-collapse-up</li>
      <li><span class="glyphicon glyphicon-comment"></span> .glyphicon .glyphicon-comment</li>
      <li><span class="glyphicon glyphicon-compressed"></span> .glyphicon .glyphicon-compressed</li>
      <li><span class="glyphicon glyphicon-copyright-mark"></span> .glyphicon .glyphicon-copyright-mark</li>
      <li><span class="glyphicon glyphicon-credit-card"></span> .glyphicon .glyphicon-credit-card</li>
      <li><span class="glyphicon glyphicon-cutlery"></span> .glyphicon .glyphicon-cutlery</li>
      <li><span class="glyphicon glyphicon-dashboard"></span> .glyphicon .glyphicon-dashboard</li>
      <li><span class="glyphicon glyphicon-download"></span> .glyphicon .glyphicon-download</li>
      <li><span class="glyphicon glyphicon-download-alt"></span> .glyphicon .glyphicon-download-alt</li>
      <li><span class="glyphicon glyphicon-earphone"></span> .glyphicon .glyphicon-earphone</li>
      <li><span class="glyphicon glyphicon-edit"></span> .glyphicon .glyphicon-edit</li>
      <li><span class="glyphicon glyphicon-eject"></span> .glyphicon .glyphicon-eject</li>
      <li><span class="glyphicon glyphicon-envelope"></span> .glyphicon .glyphicon-envelope</li>
      <li><span class="glyphicon glyphicon-euro"></span> .glyphicon .glyphicon-euro</li>
      <li><span class="glyphicon glyphicon-exclamation-sign"></span> .glyphicon .glyphicon-exclamation-sign</li>
      <li><span class="glyphicon glyphicon-expand"></span> .glyphicon .glyphicon-expand</li>
      <li><span class="glyphicon glyphicon-export"></span> .glyphicon .glyphicon-export</li>
      <li><span class="glyphicon glyphicon-eye-close"></span> .glyphicon .glyphicon-eye-close</li>
      <li><span class="glyphicon glyphicon-eye-open"></span> .glyphicon .glyphicon-eye-open</li>
      <li><span class="glyphicon glyphicon-facetime-video"></span> .glyphicon .glyphicon-facetime-video</li>
      <li><span class="glyphicon glyphicon-fast-backward"></span> .glyphicon .glyphicon-fast-backward</li>
      <li><span class="glyphicon glyphicon-fast-forward"></span> .glyphicon .glyphicon-fast-forward</li>
      <li><span class="glyphicon glyphicon-file"></span> .glyphicon .glyphicon-file</li>
      <li><span class="glyphicon glyphicon-film"></span> .glyphicon .glyphicon-film</li>
      <li><span class="glyphicon glyphicon-filter"></span> .glyphicon .glyphicon-filter</li>
      <!-- <li><span class="glyphicon glyphicon-fire"></span> .glyphicon .glyphicon-fire</li> -->
      <li><span class="glyphicon glyphicon-flag"></span> .glyphicon .glyphicon-flag</li>
      <li><span class="glyphicon glyphicon-flash"></span> .glyphicon .glyphicon-flash</li>
      <li><span class="glyphicon glyphicon-floppy-disk"></span> .glyphicon .glyphicon-floppy-disk</li>
      <li><span class="glyphicon glyphicon-floppy-open"></span> .glyphicon .glyphicon-floppy-open</li>
      <li><span class="glyphicon glyphicon-floppy-remove"></span> .glyphicon .glyphicon-floppy-remove</li>
      <li><span class="glyphicon glyphicon-floppy-save"></span> .glyphicon .glyphicon-floppy-save</li>
      <li><span class="glyphicon glyphicon-floppy-saved"></span> .glyphicon .glyphicon-floppy-saved</li>
      <li><span class="glyphicon glyphicon-folder-close"></span> .glyphicon .glyphicon-folder-close</li>
      <li><span class="glyphicon glyphicon-folder-open"></span> .glyphicon .glyphicon-folder-open</li>
      <li><span class="glyphicon glyphicon-font"></span> .glyphicon .glyphicon-font</li>
      <li><span class="glyphicon glyphicon-forward"></span> .glyphicon .glyphicon-forward</li>
      <li><span class="glyphicon glyphicon-fullscreen"></span> .glyphicon .glyphicon-fullscreen</li>
      <li><span class="glyphicon glyphicon-gbp"></span> .glyphicon .glyphicon-gbp</li>
      <li><span class="glyphicon glyphicon-gift"></span> .glyphicon .glyphicon-gift</li>
      <li><span class="glyphicon glyphicon-glass"></span> .glyphicon .glyphicon-glass</li>
      <li><span class="glyphicon glyphicon-globe"></span> .glyphicon .glyphicon-globe</li>
      <li><span class="glyphicon glyphicon-hand-down"></span> .glyphicon .glyphicon-hand-down</li>
      <li><span class="glyphicon glyphicon-hand-left"></span> .glyphicon .glyphicon-hand-left</li>
      <li><span class="glyphicon glyphicon-hand-right"></span> .glyphicon .glyphicon-hand-right</li>
      <li><span class="glyphicon glyphicon-hand-up"></span> .glyphicon .glyphicon-hand-up</li>
      <li><span class="glyphicon glyphicon-hd-video"></span> .glyphicon .glyphicon-hd-video</li>
      <li><span class="glyphicon glyphicon-hdd"></span> .glyphicon .glyphicon-hdd</li>
      <li><span class="glyphicon glyphicon-header"></span> .glyphicon .glyphicon-header</li>
      <li><span class="glyphicon glyphicon-headphones"></span> .glyphicon .glyphicon-headphones</li>
      <li><span class="glyphicon glyphicon-heart"></span> .glyphicon .glyphicon-heart</li>
      <li><span class="glyphicon glyphicon-heart-empty"></span> .glyphicon .glyphicon-heart-empty</li>
      <li><span class="glyphicon glyphicon-home"></span> .glyphicon .glyphicon-home</li>
      <li><span class="glyphicon glyphicon-import"></span> .glyphicon .glyphicon-import</li>
      <li><span class="glyphicon glyphicon-inbox"></span> .glyphicon .glyphicon-inbox</li>
      <li><span class="glyphicon glyphicon-indent-left"></span> .glyphicon .glyphicon-indent-left</li>
      <li><span class="glyphicon glyphicon-indent-right"></span> .glyphicon .glyphicon-indent-right</li>
      <li><span class="glyphicon glyphicon-info-sign"></span> .glyphicon .glyphicon-info-sign</li>
      <li><span class="glyphicon glyphicon-italic"></span> .glyphicon .glyphicon-italic</li>
      <li><span class="glyphicon glyphicon-leaf"></span> .glyphicon .glyphicon-leaf</li>
      <li><span class="glyphicon glyphicon-link"></span> .glyphicon .glyphicon-link</li>
      <li><span class="glyphicon glyphicon-list"></span> .glyphicon .glyphicon-list</li>
      <li><span class="glyphicon glyphicon-list-alt"></span> .glyphicon .glyphicon-list-alt</li>
      <!-- <li><span class="glyphicon glyphicon-lock"></span> .glyphicon .glyphicon-lock</li> -->
      <li><span class="glyphicon glyphicon-log-in"></span> .glyphicon .glyphicon-log-in</li>
      <li><span class="glyphicon glyphicon-log-out"></span> .glyphicon .glyphicon-log-out</li>
      <li><span class="glyphicon glyphicon-magnet"></span> .glyphicon .glyphicon-magnet</li>
      <li><span class="glyphicon glyphicon-map-marker"></span> .glyphicon .glyphicon-map-marker</li>
      <li><span class="glyphicon glyphicon-minus"></span> .glyphicon .glyphicon-minus</li>
      <li><span class="glyphicon glyphicon-minus-sign"></span> .glyphicon .glyphicon-minus-sign</li>
      <li><span class="glyphicon glyphicon-move"></span> .glyphicon .glyphicon-move</li>
      <li><span class="glyphicon glyphicon-music"></span> .glyphicon .glyphicon-music</li>
      <li><span class="glyphicon glyphicon-new-window"></span> .glyphicon .glyphicon-new-window</li>
      <li><span class="glyphicon glyphicon-off"></span> .glyphicon .glyphicon-off</li>
      <li><span class="glyphicon glyphicon-ok"></span> .glyphicon .glyphicon-ok</li>
      <li><span class="glyphicon glyphicon-ok-circle"></span> .glyphicon .glyphicon-ok-circle</li>
      <li><span class="glyphicon glyphicon-ok-sign"></span> .glyphicon .glyphicon-ok-sign</li>
      <li><span class="glyphicon glyphicon-open"></span> .glyphicon .glyphicon-open</li>
      <!-- <li><span class="glyphicon glyphicon-paperclip"></span> .glyphicon .glyphicon-paperclip</li> -->
      <li><span class="glyphicon glyphicon-pause"></span> .glyphicon .glyphicon-pause</li>
      <li><span class="glyphicon glyphicon-pencil"></span> .glyphicon .glyphicon-pencil</li>
      <li><span class="glyphicon glyphicon-phone"></span> .glyphicon .glyphicon-phone</li>
      <li><span class="glyphicon glyphicon-phone-alt"></span> .glyphicon .glyphicon-phone-alt</li>
      <li><span class="glyphicon glyphicon-picture"></span> .glyphicon .glyphicon-picture</li>
      <li><span class="glyphicon glyphicon-plane"></span> .glyphicon .glyphicon-plane</li>
      <li><span class="glyphicon glyphicon-play"></span> .glyphicon .glyphicon-play</li>
      <li><span class="glyphicon glyphicon-play-circle"></span> .glyphicon .glyphicon-play-circle</li>
      <li><span class="glyphicon glyphicon-plus"></span> .glyphicon .glyphicon-plus</li>
      <li><span class="glyphicon glyphicon-plus-sign"></span> .glyphicon .glyphicon-plus-sign</li>
      <li><span class="glyphicon glyphicon-print"></span> .glyphicon .glyphicon-print</li>
      <!-- <li><span class="glyphicon glyphicon-pushpin"></span> .glyphicon .glyphicon-pushpin</li> -->
      <li><span class="glyphicon glyphicon-qrcode"></span> .glyphicon .glyphicon-qrcode</li>
      <li><span class="glyphicon glyphicon-question-sign"></span> .glyphicon .glyphicon-question-sign</li>
      <li><span class="glyphicon glyphicon-random"></span> .glyphicon .glyphicon-random</li>
      <li><span class="glyphicon glyphicon-record"></span> .glyphicon .glyphicon-record</li>
      <li><span class="glyphicon glyphicon-refresh"></span> .glyphicon .glyphicon-refresh</li>
      <li><span class="glyphicon glyphicon-registration-mark"></span> .glyphicon .glyphicon-registration-mark</li>
      <li><span class="glyphicon glyphicon-remove"></span> .glyphicon .glyphicon-remove</li>
      <li><span class="glyphicon glyphicon-remove-circle"></span> .glyphicon .glyphicon-remove-circle</li>
      <li><span class="glyphicon glyphicon-remove-sign"></span> .glyphicon .glyphicon-remove-sign</li>
      <li><span class="glyphicon glyphicon-repeat"></span> .glyphicon .glyphicon-repeat</li>
      <li><span class="glyphicon glyphicon-resize-full"></span> .glyphicon .glyphicon-resize-full</li>
      <li><span class="glyphicon glyphicon-resize-horizontal"></span> .glyphicon .glyphicon-resize-horizontal</li>
      <li><span class="glyphicon glyphicon-resize-small"></span> .glyphicon .glyphicon-resize-small</li>
      <li><span class="glyphicon glyphicon-resize-vertical"></span> .glyphicon .glyphicon-resize-vertical</li>
      <li><span class="glyphicon glyphicon-retweet"></span> .glyphicon .glyphicon-retweet</li>
      <li><span class="glyphicon glyphicon-road"></span> .glyphicon .glyphicon-road</li>
      <li><span class="glyphicon glyphicon-save"></span> .glyphicon .glyphicon-save</li>
      <li><span class="glyphicon glyphicon-saved"></span> .glyphicon .glyphicon-saved</li>
      <li><span class="glyphicon glyphicon-screenshot"></span> .glyphicon .glyphicon-screenshot</li>
      <li><span class="glyphicon glyphicon-sd-video"></span> .glyphicon .glyphicon-sd-video</li>
      <li><span class="glyphicon glyphicon-search"></span> .glyphicon .glyphicon-search</li>
      <li><span class="glyphicon glyphicon-send"></span> .glyphicon .glyphicon-send</li>
      <li><span class="glyphicon glyphicon-share"></span> .glyphicon .glyphicon-share</li>
      <li><span class="glyphicon glyphicon-share-alt"></span> .glyphicon .glyphicon-share-alt</li>
      <li><span class="glyphicon glyphicon-shopping-cart"></span> .glyphicon .glyphicon-shopping-cart</li>
      <li><span class="glyphicon glyphicon-signal"></span> .glyphicon .glyphicon-signal</li>
      <li><span class="glyphicon glyphicon-sort"></span> .glyphicon .glyphicon-sort</li>
      <li><span class="glyphicon glyphicon-sort-by-alphabet"></span> .glyphicon .glyphicon-sort-by-alphabet</li>
      <li><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span> .glyphicon .glyphicon-sort-by-alphabet-alt</li>
      <li><span class="glyphicon glyphicon-sort-by-attributes"></span> .glyphicon .glyphicon-sort-by-attributes</li>
      <li><span class="glyphicon glyphicon-sort-by-attributes-alt"></span> .glyphicon .glyphicon-sort-by-attributes-alt</li>
      <li><span class="glyphicon glyphicon-sort-by-order"></span> .glyphicon .glyphicon-sort-by-order</li>
      <li><span class="glyphicon glyphicon-sort-by-order-alt"></span> .glyphicon .glyphicon-sort-by-order-alt</li>
      <li><span class="glyphicon glyphicon-sound-5-1"></span> .glyphicon .glyphicon-sound-5-1</li>
      <li><span class="glyphicon glyphicon-sound-6-1"></span> .glyphicon .glyphicon-sound-6-1</li>
      <li><span class="glyphicon glyphicon-sound-7-1"></span> .glyphicon .glyphicon-sound-7-1</li>
      <li><span class="glyphicon glyphicon-sound-dolby"></span> .glyphicon .glyphicon-sound-dolby</li>
      <li><span class="glyphicon glyphicon-sound-stereo"></span> .glyphicon .glyphicon-sound-stereo</li>
      <li><span class="glyphicon glyphicon-star"></span> .glyphicon .glyphicon-star</li>
      <li><span class="glyphicon glyphicon-star-empty"></span> .glyphicon .glyphicon-star-empty</li>
      <li><span class="glyphicon glyphicon-stats"></span> .glyphicon .glyphicon-stats</li>
      <li><span class="glyphicon glyphicon-step-backward"></span> .glyphicon .glyphicon-step-backward</li>
      <li><span class="glyphicon glyphicon-step-forward"></span> .glyphicon .glyphicon-step-forward</li>
      <li><span class="glyphicon glyphicon-stop"></span> .glyphicon .glyphicon-stop</li>
      <li><span class="glyphicon glyphicon-subtitles"></span> .glyphicon .glyphicon-subtitles</li>
      <li><span class="glyphicon glyphicon-tag"></span> .glyphicon .glyphicon-tag</li>
      <li><span class="glyphicon glyphicon-tags"></span> .glyphicon .glyphicon-tags</li>
      <li><span class="glyphicon glyphicon-tasks"></span> .glyphicon .glyphicon-tasks</li>
      <li><span class="glyphicon glyphicon-text-height"></span> .glyphicon .glyphicon-text-height</li>
      <li><span class="glyphicon glyphicon-text-width"></span> .glyphicon .glyphicon-text-width</li>
      <li><span class="glyphicon glyphicon-th"></span> .glyphicon .glyphicon-th</li>
      <li><span class="glyphicon glyphicon-th-large"></span> .glyphicon .glyphicon-th-large</li>
      <li><span class="glyphicon glyphicon-th-list"></span> .glyphicon .glyphicon-th-list</li>
      <li><span class="glyphicon glyphicon-thumbs-down"></span> .glyphicon .glyphicon-thumbs-down</li>
      <li><span class="glyphicon glyphicon-thumbs-up"></span> .glyphicon .glyphicon-thumbs-up</li>
      <li><span class="glyphicon glyphicon-time"></span> .glyphicon .glyphicon-time</li>
      <li><span class="glyphicon glyphicon-tint"></span> .glyphicon .glyphicon-tint</li>
      <li><span class="glyphicon glyphicon-tower"></span> .glyphicon .glyphicon-tower</li>
      <li><span class="glyphicon glyphicon-transfer"></span> .glyphicon .glyphicon-transfer</li>
      <li><span class="glyphicon glyphicon-trash"></span> .glyphicon .glyphicon-trash</li>
      <li><span class="glyphicon glyphicon-tree-conifer"></span> .glyphicon .glyphicon-tree-conifer</li>
      <li><span class="glyphicon glyphicon-tree-deciduous"></span> .glyphicon .glyphicon-tree-deciduous</li>
      <li><span class="glyphicon glyphicon-unchecked"></span> .glyphicon .glyphicon-unchecked</li>
      <li><span class="glyphicon glyphicon-upload"></span> .glyphicon .glyphicon-upload</li>
      <li><span class="glyphicon glyphicon-usd"></span> .glyphicon .glyphicon-usd</li>
      <li><span class="glyphicon glyphicon-user"></span> .glyphicon .glyphicon-user</li>
      <li><span class="glyphicon glyphicon-volume-down"></span> .glyphicon .glyphicon-volume-down</li>
      <li><span class="glyphicon glyphicon-volume-off"></span> .glyphicon .glyphicon-volume-off</li>
      <li><span class="glyphicon glyphicon-volume-up"></span> .glyphicon .glyphicon-volume-up</li>
      <li><span class="glyphicon glyphicon-warning-sign"></span> .glyphicon .glyphicon-warning-sign</li>
      <!-- <li><span class="glyphicon glyphicon-wrench"></span> .glyphicon .glyphicon-wrench</li> -->
      <li><span class="glyphicon glyphicon-zoom-in"></span> .glyphicon .glyphicon-zoom-in</li>
      <li><span class="glyphicon glyphicon-zoom-out"></span> .glyphicon .glyphicon-zoom-out</li>
    </ul>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="row">
                    <div class="col-md-12">
                        <div class="box">
                            <div class="box-title">
                                <h3><i class="fa fa-puzzle-piece"></i> Font Awesome</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="fa fa-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="box-content" style="padding:0">
                                <br>
                                <h3 style="margin-left:20px">Web Application Icons</h3>
                                <div class="row demo-icon">
<div class="col-md-3"><a href="#"><i class="fa fa-adjust"></i> fa-adjust</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-anchor"></i> fa-anchor</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-archive"></i> fa-archive</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrows"></i> fa-arrows</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrows-h"></i> fa-arrows-h</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrows-v"></i> fa-arrows-v</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-asterisk"></i> fa-asterisk</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-ban"></i> fa-ban</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bar-chart-o"></i> fa-bar-chart-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-barcode"></i> fa-barcode</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bars"></i> fa-bars</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-beer"></i> fa-beer</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bell"></i> fa-bell</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bell-o"></i> fa-bell-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bolt"></i> fa-bolt</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-book"></i> fa-book</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bookmark"></i> fa-bookmark</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bookmark-o"></i> fa-bookmark-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-briefcase"></i> fa-briefcase</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bug"></i> fa-bug</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-building-o"></i> fa-building-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bullhorn"></i> fa-bullhorn</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bullseye"></i> fa-bullseye</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-calendar"></i> fa-calendar</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-calendar-o"></i> fa-calendar-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-camera"></i> fa-camera</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-camera-retro"></i> fa-camera-retro</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-certificate"></i> fa-certificate</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-check"></i> fa-check</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-check-circle"></i> fa-check-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-check-circle-o"></i> fa-check-circle-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-check-square"></i> fa-check-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-check-square-o"></i> fa-check-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-circle"></i> fa-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-circle-o"></i> fa-circle-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-clock-o"></i> fa-clock-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-cloud"></i> fa-cloud</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-cloud-download"></i> fa-cloud-download</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-cloud-upload"></i> fa-cloud-upload</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-code"></i> fa-code</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-code-fork"></i> fa-code-fork</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-coffee"></i> fa-coffee</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-cog"></i> fa-cog</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-cogs"></i> fa-cogs</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-comment"></i> fa-comment</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-comment-o"></i> fa-comment-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-comments"></i> fa-comments</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-comments-o"></i> fa-comments-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-compass"></i> fa-compass</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-credit-card"></i> fa-credit-card</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-crop"></i> fa-crop</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-crosshairs"></i> fa-crosshairs</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-cutlery"></i> fa-cutlery</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-dashboard"></i> fa-dashboard <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-desktop"></i> fa-desktop</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-dot-circle-o"></i> fa-dot-circle-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-download"></i> fa-download</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-edit"></i> fa-edit <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-ellipsis-h"></i> fa-ellipsis-h</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-ellipsis-v"></i> fa-ellipsis-v</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-envelope"></i> fa-envelope</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-envelope-o"></i> fa-envelope-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-eraser"></i> fa-eraser</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-exchange"></i> fa-exchange</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-exclamation"></i> fa-exclamation</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-exclamation-circle"></i> fa-exclamation-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-exclamation-triangle"></i> fa-exclamation-triangle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-external-link"></i> fa-external-link</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-external-link-square"></i> fa-external-link-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-eye"></i> fa-eye</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-eye-slash"></i> fa-eye-slash</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-female"></i> fa-female</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-fighter-jet"></i> fa-fighter-jet</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-film"></i> fa-film</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-filter"></i> fa-filter</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-fire"></i> fa-fire</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-fire-extinguisher"></i> fa-fire-extinguisher</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-flag"></i> fa-flag</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-flag-checkered"></i> fa-flag-checkered</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-flag-o"></i> fa-flag-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-flash"></i> fa-flash <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-flask"></i> fa-flask</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-folder"></i> fa-folder</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-folder-o"></i> fa-folder-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-folder-open"></i> fa-folder-open</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-folder-open-o"></i> fa-folder-open-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-frown-o"></i> fa-frown-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-gamepad"></i> fa-gamepad</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-gavel"></i> fa-gavel</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-gear"></i> fa-gear <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-gears"></i> fa-gears <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-gift"></i> fa-gift</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-glass"></i> fa-glass</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-globe"></i> fa-globe</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-group"></i> fa-group <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-hdd-o"></i> fa-hdd-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-headphones"></i> fa-headphones</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-heart"></i> fa-heart</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-heart-o"></i> fa-heart-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-home"></i> fa-home</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-inbox"></i> fa-inbox</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-info"></i> fa-info</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-info-circle"></i> fa-info-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-key"></i> fa-key</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-keyboard-o"></i> fa-keyboard-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-laptop"></i> fa-laptop</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-leaf"></i> fa-leaf</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-legal"></i> fa-legal <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-lemon-o"></i> fa-lemon-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-level-down"></i> fa-level-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-level-up"></i> fa-level-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-lightbulb-o"></i> fa-lightbulb-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-location-arrow"></i> fa-location-arrow</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-lock"></i> fa-lock</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-magic"></i> fa-magic</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-magnet"></i> fa-magnet</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-mail-forward"></i> fa-mail-forward <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-mail-reply"></i> fa-mail-reply <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-mail-reply-all"></i> fa-mail-reply-all</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-male"></i> fa-male</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-map-marker"></i> fa-map-marker</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-meh-o"></i> fa-meh-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-microphone"></i> fa-microphone</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-microphone-slash"></i> fa-microphone-slash</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-minus"></i> fa-minus</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-minus-circle"></i> fa-minus-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-minus-square"></i> fa-minus-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-minus-square-o"></i> fa-minus-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-mobile"></i> fa-mobile</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-mobile-phone"></i> fa-mobile-phone <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-money"></i> fa-money</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-moon-o"></i> fa-moon-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-music"></i> fa-music</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-pencil"></i> fa-pencil</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-pencil-square"></i> fa-pencil-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-pencil-square-o"></i> fa-pencil-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-phone"></i> fa-phone</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-phone-square"></i> fa-phone-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-picture-o"></i> fa-picture-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-plane"></i> fa-plane</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-plus"></i> fa-plus</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-plus-circle"></i> fa-plus-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-plus-square"></i> fa-plus-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-plus-square-o"></i> fa-plus-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-power-off"></i> fa-power-off</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-print"></i> fa-print</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-puzzle-piece"></i> fa-puzzle-piece</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-qrcode"></i> fa-qrcode</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-question"></i> fa-question</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-question-circle"></i> fa-question-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-quote-left"></i> fa-quote-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-quote-right"></i> fa-quote-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-random"></i> fa-random</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-refresh"></i> fa-refresh</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-reply"></i> fa-reply</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-reply-all"></i> fa-reply-all</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-retweet"></i> fa-retweet</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-road"></i> fa-road</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rocket"></i> fa-rocket</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rss"></i> fa-rss</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rss-square"></i> fa-rss-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-search"></i> fa-search</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-search-minus"></i> fa-search-minus</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-search-plus"></i> fa-search-plus</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-share"></i> fa-share</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-share-square"></i> fa-share-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-share-square-o"></i> fa-share-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-shield"></i> fa-shield</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-shopping-cart"></i> fa-shopping-cart</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sign-in"></i> fa-sign-in</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sign-out"></i> fa-sign-out</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-signal"></i> fa-signal</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sitemap"></i> fa-sitemap</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-smile-o"></i> fa-smile-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort"></i> fa-sort</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-alpha-asc"></i> fa-sort-alpha-asc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-alpha-desc"></i> fa-sort-alpha-desc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-amount-asc"></i> fa-sort-amount-asc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-amount-desc"></i> fa-sort-amount-desc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-asc"></i> fa-sort-asc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-desc"></i> fa-sort-desc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-down"></i> fa-sort-down <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-numeric-asc"></i> fa-sort-numeric-asc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-numeric-desc"></i> fa-sort-numeric-desc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sort-up"></i> fa-sort-up <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-spinner"></i> fa-spinner</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-square"></i> fa-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-square-o"></i> fa-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-star"></i> fa-star</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-star-half"></i> fa-star-half</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-star-half-empty"></i> fa-star-half-empty <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-star-half-full"></i> fa-star-half-full <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-star-half-o"></i> fa-star-half-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-star-o"></i> fa-star-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-subscript"></i> fa-subscript</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-suitcase"></i> fa-suitcase</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-sun-o"></i> fa-sun-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-superscript"></i> fa-superscript</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-tablet"></i> fa-tablet</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-tachometer"></i> fa-tachometer</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-tag"></i> fa-tag</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-tags"></i> fa-tags</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-tasks"></i> fa-tasks</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-terminal"></i> fa-terminal</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-thumb-tack"></i> fa-thumb-tack</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-thumbs-down"></i> fa-thumbs-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-thumbs-up"></i> fa-thumbs-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-ticket"></i> fa-ticket</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-times"></i> fa-times</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-times-circle"></i> fa-times-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-times-circle-o"></i> fa-times-circle-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-tint"></i> fa-tint</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-toggle-down"></i> fa-toggle-down <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-toggle-left"></i> fa-toggle-left <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-toggle-right"></i> fa-toggle-right <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-toggle-up"></i> fa-toggle-up <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-trash-o"></i> fa-trash-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-trophy"></i> fa-trophy</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-truck"></i> fa-truck</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-umbrella"></i> fa-umbrella</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-unlock"></i> fa-unlock</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-unlock-alt"></i> fa-unlock-alt</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-unsorted"></i> fa-unsorted <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-upload"></i> fa-upload</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-user"></i> fa-user</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-users"></i> fa-users</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-video-camera"></i> fa-video-camera</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-volume-down"></i> fa-volume-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-volume-off"></i> fa-volume-off</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-volume-up"></i> fa-volume-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-warning"></i> fa-warning <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-wheelchair"></i> fa-wheelchair</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-wrench"></i> fa-wrench</a></div>

                                </div>
                                <br>
                                <br>
                                <h3 style="margin-left:20px">Form Control Icons</h3>
                                <div class="row demo-icon">
<div class="col-md-3"><a href="#"><i class="fa fa-check-square"></i> fa-check-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-check-square-o"></i> fa-check-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-circle"></i> fa-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-circle-o"></i> fa-circle-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-dot-circle-o"></i> fa-dot-circle-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-minus-square"></i> fa-minus-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-minus-square-o"></i> fa-minus-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-plus-square"></i> fa-plus-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-plus-square-o"></i> fa-plus-square-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-square"></i> fa-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-square-o"></i> fa-square-o</a></div>
                                </div>
                                <br>
                                <br>
                                <h3 style="margin-left:20px">Currency Icons</h3>
                                <div class="row demo-icon">
<div class="col-md-3"><a href="#"><i class="fa fa-bitcoin"></i> fa-bitcoin <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-btc"></i> fa-btc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-cny"></i> fa-cny <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-dollar"></i> fa-dollar <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-eur"></i> fa-eur</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-euro"></i> fa-euro <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-gbp"></i> fa-gbp</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-inr"></i> fa-inr</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-jpy"></i> fa-jpy</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-krw"></i> fa-krw</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-money"></i> fa-money</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rmb"></i> fa-rmb <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rouble"></i> fa-rouble <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rub"></i> fa-rub</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-ruble"></i> fa-ruble <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rupee"></i> fa-rupee <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-try"></i> fa-try</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-turkish-lira"></i> fa-turkish-lira <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-usd"></i> fa-usd</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-won"></i> fa-won <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-yen"></i> fa-yen <span class="text-muted">(alias)</span></a></div>
                                </div>
                                <br>
                                <br>
                                <h3 style="margin-left:20px">Text Editor Icons</h3>
                                <div class="row demo-icon">
<div class="col-md-3"><a href="#"><i class="fa fa-align-center"></i> fa-align-center</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-align-justify"></i> fa-align-justify</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-align-left"></i> fa-align-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-align-right"></i> fa-align-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bold"></i> fa-bold</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chain"></i> fa-chain <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chain-broken"></i> fa-chain-broken</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-clipboard"></i> fa-clipboard</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-columns"></i> fa-columns</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-copy"></i> fa-copy <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-cut"></i> fa-cut <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-dedent"></i> fa-dedent <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-eraser"></i> fa-eraser</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-file"></i> fa-file</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-file-o"></i> fa-file-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-file-text"></i> fa-file-text</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-file-text-o"></i> fa-file-text-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-files-o"></i> fa-files-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-floppy-o"></i> fa-floppy-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-font"></i> fa-font</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-indent"></i> fa-indent</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-italic"></i> fa-italic</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-link"></i> fa-link</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-list"></i> fa-list</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-list-alt"></i> fa-list-alt</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-list-ol"></i> fa-list-ol</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-list-ul"></i> fa-list-ul</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-outdent"></i> fa-outdent</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-paperclip"></i> fa-paperclip</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-paste"></i> fa-paste <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-repeat"></i> fa-repeat</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rotate-left"></i> fa-rotate-left <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-rotate-right"></i> fa-rotate-right <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-save"></i> fa-save <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-scissors"></i> fa-scissors</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-strikethrough"></i> fa-strikethrough</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-table"></i> fa-table</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-text-height"></i> fa-text-height</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-text-width"></i> fa-text-width</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-th"></i> fa-th</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-th-large"></i> fa-th-large</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-th-list"></i> fa-th-list</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-underline"></i> fa-underline</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-undo"></i> fa-undo</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-unlink"></i> fa-unlink <span class="text-muted">(alias)</span></a></div>
                                </div>
                                <br>
                                <br>
                                <h3 style="margin-left:20px">Directional Icons</h3>
                                <div class="row demo-icon">
<div class="col-md-3"><a href="#"><i class="fa fa-angle-double-down"></i> fa-angle-double-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-angle-double-left"></i> fa-angle-double-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-angle-double-right"></i> fa-angle-double-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-angle-double-up"></i> fa-angle-double-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-angle-down"></i> fa-angle-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-angle-left"></i> fa-angle-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-angle-right"></i> fa-angle-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-angle-up"></i> fa-angle-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-circle-down"></i> fa-arrow-circle-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-circle-left"></i> fa-arrow-circle-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-circle-o-down"></i> fa-arrow-circle-o-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-circle-o-left"></i> fa-arrow-circle-o-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-circle-o-right"></i> fa-arrow-circle-o-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-circle-o-up"></i> fa-arrow-circle-o-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-circle-right"></i> fa-arrow-circle-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-circle-up"></i> fa-arrow-circle-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-down"></i> fa-arrow-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-left"></i> fa-arrow-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-right"></i> fa-arrow-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrow-up"></i> fa-arrow-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrows"></i> fa-arrows</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrows-alt"></i> fa-arrows-alt</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrows-h"></i> fa-arrows-h</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-arrows-v"></i> fa-arrows-v</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-down"></i> fa-caret-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-left"></i> fa-caret-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-right"></i> fa-caret-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-caret-up"></i> fa-caret-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chevron-circle-down"></i> fa-chevron-circle-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chevron-circle-left"></i> fa-chevron-circle-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chevron-circle-right"></i> fa-chevron-circle-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chevron-circle-up"></i> fa-chevron-circle-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chevron-down"></i> fa-chevron-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chevron-left"></i> fa-chevron-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chevron-right"></i> fa-chevron-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-chevron-up"></i> fa-chevron-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-hand-o-down"></i> fa-hand-o-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-hand-o-left"></i> fa-hand-o-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-hand-o-right"></i> fa-hand-o-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-hand-o-up"></i> fa-hand-o-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-long-arrow-down"></i> fa-long-arrow-down</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-long-arrow-left"></i> fa-long-arrow-left</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-long-arrow-right"></i> fa-long-arrow-right</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-long-arrow-up"></i> fa-long-arrow-up</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-toggle-down"></i> fa-toggle-down <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-toggle-left"></i> fa-toggle-left <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-toggle-right"></i> fa-toggle-right <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-toggle-up"></i> fa-toggle-up <span class="text-muted">(alias)</span></a></div>
                                </div>
                                <br>
                                <br>
                                <h3 style="margin-left:20px">Video Player Icons</h3>
                                <div class="row demo-icon">
<div class="col-md-3"><a href="#"><i class="fa fa-arrows-alt"></i> fa-arrows-alt</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-backward"></i> fa-backward</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-compress"></i> fa-compress</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-eject"></i> fa-eject</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-expand"></i> fa-expand</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-fast-backward"></i> fa-fast-backward</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-fast-forward"></i> fa-fast-forward</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-forward"></i> fa-forward</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-pause"></i> fa-pause</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-play"></i> fa-play</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-play-circle"></i> fa-play-circle</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-play-circle-o"></i> fa-play-circle-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-step-backward"></i> fa-step-backward</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-step-forward"></i> fa-step-forward</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-stop"></i> fa-stop</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-youtube-play"></i> fa-youtube-play</a></div>
                                </div>
                                <br>
                                <br>
                                <h3 style="margin-left:20px">Brand Icons</h3>
                                <div class="row demo-icon">
<div class="col-md-3"><a href="#"><i class="fa fa-adn"></i> fa-adn</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-android"></i> fa-android</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-apple"></i> fa-apple</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bitbucket"></i> fa-bitbucket</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bitbucket-square"></i> fa-bitbucket-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-bitcoin"></i> fa-bitcoin <span class="text-muted">(alias)</span></a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-btc"></i> fa-btc</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-css3"></i> fa-css3</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-dribbble"></i> fa-dribbble</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-dropbox"></i> fa-dropbox</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-facebook"></i> fa-facebook</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-facebook-square"></i> fa-facebook-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-flickr"></i> fa-flickr</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-foursquare"></i> fa-foursquare</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-github"></i> fa-github</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-github-alt"></i> fa-github-alt</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-github-square"></i> fa-github-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-gittip"></i> fa-gittip</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-google-plus"></i> fa-google-plus</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-google-plus-square"></i> fa-google-plus-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-html5"></i> fa-html5</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-instagram"></i> fa-instagram</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-linkedin"></i> fa-linkedin</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-linkedin-square"></i> fa-linkedin-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-linux"></i> fa-linux</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-maxcdn"></i> fa-maxcdn</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-pagelines"></i> fa-pagelines</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-pinterest"></i> fa-pinterest</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-pinterest-square"></i> fa-pinterest-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-renren"></i> fa-renren</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-skype"></i> fa-skype</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-stack-exchange"></i> fa-stack-exchange</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-stack-overflow"></i> fa-stack-overflow</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-trello"></i> fa-trello</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-tumblr"></i> fa-tumblr</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-tumblr-square"></i> fa-tumblr-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-twitter"></i> fa-twitter</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-twitter-square"></i> fa-twitter-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-vimeo-square"></i> fa-vimeo-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-vk"></i> fa-vk</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-weibo"></i> fa-weibo</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-windows"></i> fa-windows</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-xing"></i> fa-xing</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-xing-square"></i> fa-xing-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-youtube"></i> fa-youtube</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-youtube-play"></i> fa-youtube-play</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-youtube-square"></i> fa-youtube-square</a></div>
                                </div>
                                <br>
                                <br>
                                <h3 style="margin-left:20px">Medical Icons</h3>
                                <div class="row demo-icon">
<div class="col-md-3"><a href="#"><i class="fa fa-ambulance"></i> fa-ambulance</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-h-square"></i> fa-h-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-hospital-o"></i> fa-hospital-o</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-medkit"></i> fa-medkit</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-plus-square"></i> fa-plus-square</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-stethoscope"></i> fa-stethoscope</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-user-md"></i> fa-user-md</a></div>
<div class="col-md-3"><a href="#"><i class="fa fa-wheelchair"></i> fa-wheelchair</a></div>
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Main Content -->
                
                <footer>
                    <p>2013 © FLATY Admin Template.</p>
                </footer>

                <a id="btn-scrollup" class="btn btn-circle btn-lg" href="#"><i class="fa fa-chevron-up"></i></a>
            </div>
            <!-- END Content -->
        </div>
        <!-- END Container -->


        <!--basic scripts-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="assets/jquery/jquery-2.0.3.min.js"><\/script>')</script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/jquery-slimscroll/jquery.slimscroll.min.js"></script>
        <script src="assets/jquery-cookie/jquery.cookie.js"></script>

        <!--page specific plugin scripts-->

        <!--flaty scripts-->
        <script src="js/flaty.js"></script>
        <script src="js/flaty-demo-codes.js"></script>

    </body>
</html>
